<template>
  <cjui-page-panel header="MessageBox 消息弹框">
    <template #intro>
      修改了样式。
    </template>

    <el-button v-for="item in btns" :key="item.type" :type="item.type" @click="openMessageBox(item.type)">
      {{ item.label }}
    </el-button>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const btns = [
  { label: '提示确认框', type: 'primary' },
  { label: '警告确认框', type: 'warning' },
  { label: '删除确认框', type: 'danger' },
]

// 消息弹框
const message = useMessage()
function openMessageBox(type: string) {
  if (type === 'primary') {
    message.confirm('这是一段消息信息。', '弹框标题')
  } else if (type === 'warning') {
    message.confirmWarning('这是一段消息信息。', '弹框标题')
  } else if (type === 'danger') {
    message.confirmError('这是一段消息信息。', '弹框标题')
  }
}
</script>
